<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Trợ giúp cho OWL - Open Web framework for Lecturer - Cá nhân hóa trang thông tin</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="Generator" content="OWL 1.0" />
        <meta name="description" content="Trợ giúp cho OWL" />
        <meta name="keywords" content="OWL, help, trợ giúp" />
        <link href="styles/layout.css" rel="stylesheet" type="text/css" />
        <link href="styles/interface.css" rel="stylesheet" type="text/css" />
        <link href="styles/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="../default-scripts/jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="jquery.lightbox-0.5.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $('.lightbox a').lightBox();
            })
        </script>
    </head>
    <body>
        <div id="header">
            <div id="logo">
                <img src="../images/logo/owl-logo-light-96.png" alt="Owl Logo" />
            </div>
            <div id="title">
                <h1>Trợ giúp cho OWL</h1>
                <h3>Open webpage for lecturer</h3>
            </div>
        </div>
        <div id="wrapper">
            <div id="sidebar">
                <div class="sidebar-header">
                    <a href="index.html">Giới thiệu</a>
                </div>
                <div class="sidebar-header">
                    <a href="getting-start.html">Bắt đầu với OWL</a>
                </div>
                <div class="sidebar-content">
                    <ul>
                        <li>
                            <a href="#installation">Cài đặt</a>
                        </li>
                        <li>
                            <a href="#initial-info">Cung cấp thông tin ban đầu</a>
                        </li>
                        <li>
                            <a href="#choose-your-language">Lựa chọn ngôn ngữ</a>
                        </li>
                        <li>
                            <a href="#change-your-password">Thay đổi mật khẩu</a>
                        </li>
                    </ul>
                </div>
                <div class="sidebar-header">
                    <a href="basic.html">Hướng dẫn sử dụng cơ bản</a>
                </div>
                <div class="sidebar-content">
                    <ul>
                        <li>
                            <a href="basic.html#update-your-personal-info">Cập nhật thông tin cá nhân</a>
                        </li>
                        <li>
                            <a href="basic.html#courses-and-documents">Môn học và tài liệu</a>
                        </li>
                        <li>
                            <a href="basic.html#post-your-note">Đăng thông báo</a>
                        </li>
                        <li>
                            <a href="basic.html#write-your-page">Viết một trang web riêng</a>
                        </li>
                    </ul>
                </div>
                <div class="sidebar-header">
                    <b>Cá nhân hóa trang thông tin</b>
                </div>
                <div class="sidebar-content">
                    <ul>
                        <li>
                            <a href="customize.html#system-options">Tùy chọn hệ thống</a>
                        </li>
                        <li>
                            <a href="customize.html#themes">Thay đổi giao diện</a>
                        </li>
                        <li>
                            <a href="customize.html#widget">Widgets</a>
                        </li>
                    </ul>
                </div>                
            </div>
            <div id="content">
                <h2>Cá nhân hóa trang thông tin</h2>
                <p>
                    Mục này giúp trang thông tin của bạn trở nên khác biệt so với các trang thông tin khác cùng sử dụng OWL.
                    Bạn hoàn toàn có thể biến OWL thành trang web mang đặc trưng riêng của mình chỉ sau khi thực hiện một vài bước hướng dẫn ở phần dưới.
                </p>
                <ol>
                    <li>
                        <a href="#system-options">Tùy chọn hệ thống</a>
                    </li>
                    <li>
                        <a href="#themes">Thay đổi giao diện</a>
                    </li>
                    <li>
                        <a href="#widget">Tùy chọn widget</a>
                    </li>                    
                </ol>
                <h3 id="system-options">Tùy chọn hệ thống - Bạn có thể tùy chọn tất cả những gì có thể</h3>
                <p>
                   Trang tùy chọn được chia thành các nhóm để tiện cho người sử dụng thao tác. Các tùy chọn đều
                   được viết bằng tiếng việt và được chú thích đầy đủ.
                </p>
                <p class="info">
                    Tùy chọn khóa widget cho bạn khóa trạng thái của widget khi đăng nhập. Ở trạng thái khóa, widget
                    chỉ có thể được kéo thả ở trang "Quản lý widget". Khi không khóa bạn có thể kéo thả widget ở bất
                    kỳ đâu trong trang quản trị.
                </p>                
                <div class="info">
                    Tùy chọn hiệu ứng cho phép bạn tắt hoặc bật hiệu ứng cho trang web của bạn. Điều này giúp OWL có thể chạy trên
                    các máy cấu hình yếu. Các hiệu ứng trong OWL:
                    <ul>
                        <li>Hiệu ứng xoay khi hiển thị cấu hình cho widget</li>
                        <li>Hiệu ứng biến mất khi widget bị xóa</li>
                        <li>Hiệu ứng khi kéo thả widget</li>
                        <li>Hiệu ứng khi đóng hoặc mở form sửa thông tin</li>
                        <li>Hiệu ứng cho phép "mặc thử" khi di chuột qua hình ảnh của giao diện</li>
                    </ul>
                </div>
                
                <p class="lightbox">
                    <a href="images/owl-help-image/option-1.jpg"><img src="images/owl-help-image/option-1.jpg" alt="Option Config" width="150"/></a>
                    <a href="images/owl-help-image/option-2.jpg"><img src="images/owl-help-image/option-2.jpg" alt="Option Config" width="150"/></a>
                </p>

                <h3 id="themes">Tùy chọn giao diện</h3>
                <p>
                    OWL cung cấp các cơ chế tùy biến giao diện đa dạng. Nếu là người thông thạo về PHP, bạn có thể thay đổi toàn bộ các template
                    của trang web, từ cách bố trí các thành phần trên trang web (layout) đến font chữ, màu sắc, hay icon mặc định của trang
                    web.  Nếu bạn không giỏi về PHP nhưng biết về CSS, bạn có tạo các <strong>Color-Scheme</strong> cho trang Web của mình dựa trên một layout cố định.
                    Cuối cùng, nếu bạn không phải là người biết về công nghệ, bạn cũng có thể tự tạo giao diện cho mình bằng cách chọn màu cho các
                    vùng của trang web.
                </p>
                <p>
                    OWL có cung cấp một vài giao diện mặc định, cho phép bạn chọn lựa và tùy biến. Để sử dụng một giao diện bạn cần ấn chuột vào ảnh chụp mô tả
                    của giao diện đó. Sau khi trang Web được nạp lại bạn sẽ thấy giao diện thay đổi.
                </p>
                 <p class="warning">
                    Do các giao diện này phần lớn khác nhau về layout của trang Web, nên bạn có thể gặp trục trặc khi đổi sang một giao diện mới.
                    Tuy nhiên bạn ngay lập tức có thể quay trở về giao diện cũ cũng chỉ bằng một cú nhấn chuột.
                </p>
                <p>
                    Ứng với tùy chọn <strong>Color-Scheme</strong> hay còn gọi là <strong>tông màu</strong>. OWL cung cấp cho bạn cơ chế
                    "mặc thử" trước khi thật sự "mua" giao diện đó. Bạn chỉ cần rê chuột qua tông màu mình thích, bạn sẽ thấy giao diện thay
                    đổi, nếu thấy phù hợp hãy ấn chuột, nếu không đơn giản là rê chuột ra và thử một tông màu khác.
                </p>
                <p class="warning">
                    Bạn chỉ có thể "mặc thử" tông màu khi tùy chọn "hiệu ứng" được kích hoạt. Ở chế độ mặc định IE6 không hỗ trợ hiệu ứng
                    nên bạn không thể "mặc thử" trên IE6.
                </p>
                <p>
                    Tự mình sơn nhà, đơn giản nhưng cũng không kém phần thú vị. Mỗi phần trên trang web của bạn được gán với một mục cấu hình
                    giao diện. Chọn màu mình muốn từ bảng mầu và chọn ra sự phối màu đẹp nhất theo ý bạn. Ấn chuột vào "Mặc định" sẽ đưa trang
                    của bạn về cách phối màu mặc định.
                </p>

                <div class="lightbox">
                    <a href="images/owl-help-image/theme-default.jpg"><img src="images/owl-help-image/theme-default.jpg" alt="Theme Default" width="140"/></a>
                    <a href="images/owl-help-image/theme-motion.jpg"><img src="images/owl-help-image/theme-motion.jpg" alt="Theme Motion" width="140"/></a>
                    <a href="images/owl-help-image/theme-color-scheme-1.jpg"><img src="images/owl-help-image/theme-color-scheme-1.jpg" alt="Color Scheme" width="140"/></a>
                    <a href="images/owl-help-image/theme-color-scheme-2.jpg"><img src="images/owl-help-image/theme-color-scheme-2.jpg" alt="Color Scheme" width="140"/></a>
                    <a href="images/owl-help-image/theme-color-scheme-3.jpg"><img src="images/owl-help-image/theme-color-scheme-3.jpg" alt="Color Scheme" width="140"/></a>
                    <a href="images/owl-help-image/theme-customize-init.jpg"><img src="images/owl-help-image/theme-customize-init.jpg" alt="Theme Customize" width="140"/></a>
                    <a href="images/owl-help-image/theme-color-pick-before.jpg"><img src="images/owl-help-image/theme-color-pick-before.jpg" alt="Theme Color Pick Before" width="140"/></a>
                    <a href="images/owl-help-image/theme-color-pick-after.jpg"><img src="images/owl-help-image/theme-color-pick-after.jpg" alt="Theme Color Pick After" width="140"/></a>
                    
                </div>
                
                <h3 id="widget">Tùy chọn widget</h3>
                <p>
                    OWL cung cấp cho bạn hệ thống các <strong>widget</strong> mặc định. Mỗi widget có thể được hiểu là vùng nhỏ trên trang web dùng để đưa ra các thông tin.
                    Trong mỗi giao diện của OWL đều có các <strong>sidebar</strong> có thể hiểu là các khay dùng để chứa widget. Điều bạn cần làm chỉ là lựa chọn những widget
                    mình thích và kéo nó vào vị trí mình muốn trên trang web của bạn.
                </p>

                <p>
                    Việc thêm widget có thể thực hiện đơn giản bằng cách, đặt chuột vào tiêu đề của widget và kéo thả widget đó sang sidebar
                    tương ứng mà bạn thích. Sau đó thực hiện cấu hình cho widget đó, và kích vào nút Save (có hình mũi tên xuống) để lưu lại.
                </p>

                <p>
                    Khi bạn kéo thả widget từ sidebar này sang sidebar khác. OWL sẽ tự động lưu lại ví trí của widget đó.
                </p>

                <p class="info">
                    Trong trang "Quản lý widget" luôn có một khay gọi là "Các widget không hiển thị" nằm ngay bên dưới khay "Danh sách các widget".
                    Khay này cho phép bạn giữ lại cấu hình của các widget chưa cần dùng đến. Khi cần hiển thị lại các widget đó, bạn chỉ cần
                    kéo thả nó vào sidebar mà mình mong muốn.
                </p>
                
                <p class="warning">
                    Do thiết kế của giao diện, nên độ dài của các sidebar đứng thường có hạn, do đó khi kéo thả widget bạn lên để ý đến ký hiệu
                    giữ chỗ của widget trên sidebar (khung hình chữ nhật bằng nét chấm).Khi thấy ký hiệu giữ chỗ xuất hiện bạn có thể bỏ chuột ra khỏi widget.
                </p>             

                <p>
                    Bạn có thể chuyển qua chế độ cấu hình của widget bằng cách ấn vào nút Info ở trên tiêu đề của widget (hình chữ i). Sau khi nhấn nút Save (có hình mũi tên xuống)
                    bạn sẽ ngay lập tức thấy sự thay đổi.
                </p>
                <p>
                    Việc xóa widget có thể thực hiện bằng hai cách, trong phần cấu hình của widget lựa chọn nút Delete (hình chữ X) hoặc ngay từ trên giao
                    diện bạn chỉ cần kéo thả widget đó trở lại khay "Danh sách các widget".
                </p>

                <p class="info">
                    OWL hỗ trợ đa thể hiện trong widget, bạn có thể kéo thả cùng một widget với các cấu hình khác nhau vào sidebar.
                </p>

                <p class="info">
                    Khi bạn thay đổi sang một giao diện mới có ít sidebar hơn giao diện cũ, những widget của sidebar không được hiển thị sẽ tự động
                    chuyển sang khay của "Các widget không hiển thị". Điều này giúp bạn giữ lại được các tùy chọn của các widget cũ. Sau đó việc
                    kéo thả nó vào sidebar mới hay hủy bỏ nó là tùy thuộc vào bạn.
                </p>
                <div class="lightbox">
                    
                    <a href="images/owl-help-image/widget-add.jpg"><img src="images/owl-help-image/widget-add.jpg" alt="Widget Add" width="140"/></a>
                    <a href="images/owl-help-image/widget-config.jpg"><img src="images/owl-help-image/widget-config.jpg" alt="Widget Config" width="140"/></a>
                    <a href="images/owl-help-image/widget-flip.jpg"><img src="images/owl-help-image/widget-flip.jpg" alt="Widget Flip" width="140"/></a>
                    <a href="images/owl-help-image/widget-present.jpg"><img src="images/owl-help-image/widget-present.jpg" alt="Widget Present" width="140"/></a>
                    <a href="images/owl-help-image/widget-inactive.jpg"><img src="images/owl-help-image/widget-inactive.jpg" alt="Widget Inactive" width="140"/></a>
                    <a href="images/owl-help-image/widget-move.jpg"><img src="images/owl-help-image/widget-move.jpg" alt="Widget Move" width="140"/></a>
                    <a href="images/owl-help-image/widget-about-to-remove.jpg"><img src="images/owl-help-image/widget-about-to-remove.jpg" alt="widget-about-remove" width="140"/></a>
                    <a href="images/owl-help-image/widget-poof.jpg"><img src="images/owl-help-image/widget-poof.jpg" alt="Widget Poof" width="140"/></a>
                    
                </div>
            </div>
            <div style="clear:both;"></div>
        </div>
        <div id="footer">
            Powered by
            <a href="http://code.google.com/p/ponyo">
                OWL - Open Web framework for Lecturer
            </a>
            - Fly anywhere
        </div>
    </body>
</html>
